
<template>
  <!-- 导航部分 -->
  <el-row class="row">
    <el-col :span="24">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item>内容类型管理</el-breadcrumb-item>
        <el-breadcrumb-item>新增内容类型</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>
  <!-- 搜索栏 -->
  <el-row class="row">
    <el-col :span="24">
      <el-form inline :model="contentQuery" label-width="auto" >
        <el-form-item label="类别">
          <el-button @click="showChooseParentWin" >{{currentCatName}}</el-button>
        </el-form-item>
        <el-form-item label="文本关键字">
          <el-input v-model="contentQuery.text1" />
        </el-form-item>
        <el-form-item label="状态">
            <el-select
                v-model="contentQuery.status"
                placeholder="全部状态"
                size="large"
                style="width: 240px"
            >
              <el-option :key="0" label="全部" :value="0"/>
              <el-option :key="1" label="正常" :value="1"/>
              <el-option :key="2" label="禁用" :value="2"/>
            </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="loadContents" type="info">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <!-- 工具栏 -->
  <el-row class="row">
    <el-col :span="24">
      <el-button-group class="ml-4">
        <el-button type="primary" @click="toAdd"><el-icon><Plus /></el-icon></el-button>
        <el-button type="primary" ><el-icon><EditPen /></el-icon></el-button>
        <el-button type="primary" ><el-icon><Minus /></el-icon></el-button>
      </el-button-group>
    </el-col>
  </el-row>
  <!-- 列表 -->
  <el-row class="row">
    <el-col :span="24">
      <el-table :data="contents" stripe  border style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="category.catName" label="类别" width="180"/>
        <el-table-column prop="url" label="url" width="180" />
        <el-table-column prop="text1" label="文本1" width="180" />
        <el-table-column prop="text2" label="文本2" width="180" />
        <el-table-column prop="img1" label="图片1" >
          <template #default="scope">
            <img :src="scope.row.img1" height="50"/>
          </template>
        </el-table-column>
        <el-table-column prop="img2" label="图片2" >
          <template #default="scope">
            <img :src="scope.row.img2" height="50"/>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column prop="status" label="状态" width="180" >
          <template #default="scope">
            <tag v-if="scope.row.status == 1" type="success">正常</tag>
            <tag v-else type="error">禁用</tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" >
          <template #default="scope">
            <el-button size="small" type="info">编辑</el-button>
            <el-button size="small" type="error">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <!-- 分页栏 -->
  <el-row class="row">
    <el-col :span="24">
      <el-pagination @change="changePage" background layout="prev, pager, next" :total="total" />
    </el-col>
  </el-row>


  <!-- 选择内容类别 -->
  <el-dialog
      v-model="chooseParentDialog"
      title="选择内容类别"
      width="500"

  >
    <el-tree
        :data="cats"
        :props="defaultProps"
        @node-click="chooseParent"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="chooseParentDialog = false">取消</el-button>
        <el-button type="primary" @click="doChooseParentCatOk">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import {useRouter} from 'vue-router'
import contentRequest from '../../api/content.js';
import contentCategoryRequest from '../../api/contentCategory.js';
import {ref, onMounted, reactive} from 'vue';
let router = useRouter();
// 定义属性
// 搜索表单中选择类别的相关属性
let chooseParentDialog = ref(false);
let currentCat = undefined;// 记录当前选择的父类目对象
const defaultProps = {
  children: 'children',
  label: 'catName',
}
// 保存搜索条件的对象
let contentQuery = reactive({});
// 搜索表单中的内容类型的名称
let currentCatName = ref('选择类别');
// 保存我们加载的所有的内容列表
let contents = ref([]);
// 分页相关属性
let total = ref(0);
let currentPage = ref(1);
let limit = ref(10);
/*模拟数据*/
let cats = [];
// 函数--------------------
/**
 * 工具栏添加按钮事件
 */
function toAdd(){
  router.push("/home/content-add");
}
/**
 * 显示选择父类型的窗体
 */
function showChooseParentWin(){
  chooseParentDialog.value = true;
}
/**
 * 加载所有的内容类型，结果是一个树结构
 * @returns {Promise<void>}
 */
async function loadCats(){
  contentCategoryRequest.queryAll(res=>{
    console.log(res)
    cats = res.data;
  })
}
/**
 * 树节点的单击事件
 * @param data 这个节点上的数据
 */
function chooseParent(data){
  // 立刻记录当前选择的节点
  currentCat = data;
}

/**
 * 选择父类目弹窗的确定按钮
 */
function doChooseParentCatOk(){
  // 将按钮文本修改为 当前选择的父类别名称
  if(currentCat)
    currentCatName.value = currentCat.catName;
  // 关闭窗体
  chooseParentDialog.value = false;
}

// 翻页的事件
function changePage(value){
  currentPage.value = value;
  loadContents();
}
// 分页查询数据的函数
async function loadContents(){
  if(currentCat){
    contentQuery.catId=currentCat.catId;
  }
  contentRequest.queryByPage(currentPage.value,limit.value,contentQuery,res=>{
    contents.value=res.data.data;
    total.value = res.data.total;
  })
}

onMounted(()=>{
  loadContents();
  loadCats();
})
</script>
<style scoped>

</style>